<template>
	<view class="flex-wrap-spaceAround  padding_10rpx">
       <block v-for="(item,index) in templateList" :key="index">
		   <view class="selectTemplateOne">
		   	<image class="imgTemplate" :src="item.img" mode="heightFix"></image>
		   	<radio-group name="apply" class="radioText flex flex-align-center padding_22rpx">
		   
		   		<view class="agree flex-align-center">
		   
		   
		   			<label @click.stop="checkedOne(index,item)">
		   				<radio :checked="agreeChecked[index]" value="1" color="rgb(42, 137, 255)"
		   					style="transform:scale(0.8);padding-left:12rpx;" />{{item.name}}
		   			</label>
		   		</view>
		   
		   	</radio-group>
		   </view>
	   </block>
		
		<!-- <view class="selectTemplateTwo">
			<image class="imgTemplate" src="../../static/会员卡管理端/首页.png" mode="heightFix"></image>
			<radio-group name="apply" class="radioText flex flex-align-center padding_22rpx">

				<view class="agree flex-align-center">


					<label @click.stop="checkedTwo(1)">
						<radio :checked="agreeChecked[1]" value="2" color="rgb(42, 137, 255)"
							style="transform:scale(0.8);padding-left:12rpx;" />模版二
					</label>
				</view>

			</radio-group>
		</view>
		<view class="selectTemplateThree">
			<image class="imgTemplate" src="../../static/会员卡管理端/首页-1.png" mode="heightFix"></image>
			<radio-group name="apply" class="radioText flex flex-align-center padding_22rpx">

				<view class="agree flex-align-center">


					<label @click.stop="checkedThree(2)">
						<radio :checked="agreeChecked[2]" value="3" color="rgb(42, 137, 255)"
							style="transform:scale(0.8);padding-left:12rpx;" />模版三
					</label>
				</view>

			</radio-group>
		</view>
		<view class="selectTemplateFour">
			<image class="imgTemplate" src="../../static/会员卡管理端/iPhone 11 Pro _ X - 20.png" mode="heightFix"></image>
			<radio-group name="apply" class="radioText flex flex-align-center padding_22rpx">

				<view class="agree flex-align-center">


					<label @click.stop="checkedFour(3)">
						<radio :checked="agreeChecked[3]" value="4" color="rgb(42, 137, 255)"
							style="transform:scale(0.8);padding-left:12rpx;" />模版四
					</label>
				</view>

			</radio-group>

		</view> -->
		<view class="sumbit flex" @click="sumbmit()">
			确定
		</view>



	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				agreeChecked: [true, false, false, false],
				token: uni.getStorageSync('login').token,
				templateList:[],
				apiValue:null



			}
		},
		onLoad() {

		},
		onShow() {
			this.init()
		},
		methods: {
			async init() {

				const result = await this.$http.post({
					url: this.$api.templateList,
					data: {
						page: 1,
						limit: 10,

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					
					this.templateList=result.data
					// 需要根据status 来判断勾选那个
					const findindex=this.templateList.findIndex((item,index)=>{
						this.agreeChecked[index]=false
						return item.status==1
					})
					console.log(findindex)
					
					this.agreeChecked[findindex]=true
					 this.apiValue = this.templateList[findindex]
					
				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			async checkedOne(val,item) {

				for (let i = 0; i <= 3; i++) {
					console.log(i);
					// this.agreeChecked[i]=false
					this.$set(this.agreeChecked, i, false);
				}
				// console.log(val)
				this.$set(this.agreeChecked, val, true);
				this.apiValue=item
				


			},
			checkedTwo(val) {

				for (let i = 0; i <= 3; i++) {
					console.log(i);
					this.agreeChecked[i] = false

				}

				this.$set(this.agreeChecked, val, true);


			},
			checkedThree(val) {

				for (let i = 0; i <= 3; i++) {
					console.log(i);
					this.agreeChecked[i] = false

				}
				this.$set(this.agreeChecked, val, true);


			},
			checkedFour(val) {

				for (let i = 0; i <= 3; i++) {
					console.log(i);
					this.agreeChecked[i] = false

				}
				this.$set(this.agreeChecked, val, true);


			},
			async sumbmit(){
				const result = await this.$http.post({
					url: this.$api.upTemplate,
					data: {
						id: this.apiValue.id,
						status: 1,
				
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
				
				})
				if (result.code == 0) {
					this.init()
					this.$sun.toast(result.msg, 'none')
				
				} else {
					this.$sun.toast(result.msg, 'none')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.imgTemplate {

		height: 800.56rpx;
	}

	.sumbit {
		width: 630rpx;
		height: 76rpx;
		background: rgb(81, 142, 247);
		color: rgb(255, 255, 255);
		font-size: 32rpx;
		font-weight: 700;
		border-radius: 108rpx;
		margin-left: 60rpx;
		margin-top: 60rpx;
		margin-bottom: 20rpx;
	}

	page {
		background: #f6f6f6;
	}
</style>